import React from 'react';
class TabsControl extends React.Component {
    constructor(){
        super();
        this.state ={
            currentIndex:0
        }
        this.onClick = (index)=>{
            this.setState({currentIndex:index})
        }
    }
    check_tittle_index(index){
        return index === this.state.currentIndex?'Tab_tittle_active':'Tab_tittle';
    }
    check_item_index(index){
        return index === this.state.currentIndex?'Tab_item_show':'Tab_item';
    }
    componentDidCatch(){
    }
    render(){
        return (
            <div>
                <div className="Tab_tittle_wrap f-clearfix">
                    {
                        React.Children.map(this.props.children,(element,index)=>{
                            if(element.props.type == 'hidden'){
                                return null
                            }
                            return (
                                <div onClick={ () => { this.setState({currentIndex : index}) } } 
                                     className={this.check_tittle_index(index)}>{element.props.name}</div>
                            )
                        })
                    }
                </div>
                <div className="Tab_item_wrap">
                    {
                        React.Children.map(this.props.children,(element,index)=>{
                            return (
                                <div className={this.check_item_index(index)}>{element}</div>
                            )
                        })
                    }
                </div>
            </div>
        )
    }
}
export default TabsControl;